<template>
    <div >
      <div style="padding-bottom: 0.2rem" v-if="loadmore">
			
        <!--下拉框-->
        <div class="fix">
          <div class="pos">
            <transition name="fade">
              <!--第一个联动-->
              <div  v-if="quanbu" style="background: #fff">
                <div class="xia" v-for="(item,index) in one" @click="xi(item)">
                  <span :class="item.title == pracite?'spanspan1':'spanspan'">{{item.title}}</span>
                  <img src="../../../src/assets/img/dui.png" alt="" v-if="item.title == pracite">
                  <p></p>
                </div>
              </div>

              <!--第三个联动-->
              <div  v-if="quanbu2" style="background: #fff">
                <div class="xia" v-if="quanbu2" v-for="(item,index) in thr" @click="xi2(item)">
                  <span :class="item.title == pracite2?'spanspan1':'spanspan'">{{item.title}}</span>
                  <img src="../../../src/assets/img/dui.png" alt="" v-if="item.title == pracite2">
                  <p></p>
                </div>
              </div>

            </transition>
          </div>

          <div style="width:92%;margin:auto;display: flex;justify-content:space-around;height: 0.8rem;align-items: center;background: #fff;z-index: 999999;">
            <!--第一个联动-->
            <div class="shang" @click="btn()" >
              <span :class="quanbu?'blue':'gray'">{{pracite}}</span>
							<img :src="quanbu?imgSrc1:imgSrc2" alt="">
              <!-- <img :src="quanbu?'../../assets/img/shang.png':'../../assets/img/bto.png'" alt=""> -->
              <!--<p style="width: 100%;height: 0.02rem;background:rgba(237,237,237,1);-->
              <!--opacity:0.4;margin-top: 0.2rem;"></p>-->
            </div>

            <!--第三个联动-->

            <div class="shang" @click="btn2()" >
              <span :class="quanbu2?'blue':'gray'">{{pracite2}}</span>
							<img :src="quanbu2?imgSrc1:imgSrc2" alt="">
              <!-- <img :src="quanbu2?'../../assets/img/shang.png':'../../assets/img/bto.png'" alt=""> -->
              <!--<p style="width: 100%;height: 0.02rem;background:rgba(237,237,237,1);-->
              <!--opacity:0.4;margin-top: 0.2rem;"></p>-->
            </div>
          </div>
        </div>



        <!--内容-->
					<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
						<div id='dataList0'>
							<div class="hotclass" v-for="(item,index) in tab0.list" @click="banji(item)">
								<div class="classpic">
									<img :src="img+item.thumb" alt="">
								</div>
								<p class="miaoshu">{{item.name}}</p>
								<div class="ce">
									
									<!--左边照片-->
									<div class="leftImg">
										<div v-for="(i,index) in item.teacher_list" v-if="index<3">
											<img :src="img+i.avatar" alt="">
											<p>{{i.name}}</p>
										</div>
									</div>
									
									<!--未购买-->
									<div  v-if="item.is_pay == 0||item.is_pay == '0'">
										
										<!--人员已满-->
										<div class="rightZ" v-if="item.is_stop == 1||item.is_stop == '1'">
											<button class="buttons1">人员已满</button>
										</div>
										<div class="rightZ" v-else>
											<p v-if="Number(item.price)>0" class="pricetype">¥{{item.price}}</p>
											<p v-else class="buttonparic">免费</p>
											<p class="pricedetail" v-if="item.type == 2||item.type == '2'">保过班</p>
											<p class="pricedetail" v-if="item.type == 1||item.type == '1'">普通班</p>
											<p class="pricedetail1">{{item.slogen}}</p>
										</div>
									</div>
									<!--去学习-->
									<div class="rightZ" v-else>
										<button v-if="Number(item.price)>0" class="buttons">去学习</button>
										<button class="buttons buttonparic" v-else>免费</button>
									</div>

								</div>
								<!--weiba-->
								<div class="btoS">
									<p v-if="item.start_time!=0||item.start_time!='0'">{{item.start_time}}—{{item.end_time}}</p>
									<p v-else>{{item.end_time}}</p>
									<p>{{item.sales}}人已加入</p>
								</div>
								<p style="width: 100%;height: 0.02rem;background:rgba(237,237,237,1);margin-top: 0.3rem;"></p>
							</div>
						</div>
						</mescroll-vue>
      </div>
			<div class="loadmore" v-else>
				<img src="../../../src/assets/img/load.gif" alt="">
			</div>

    </div>

</template>

<script>
	  import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Allclass",
				components: {
				  MescrollVue
				},
      data(){
        return{
					imgSrc: require("../../assets/img/nokong/noclass.png"), 
					imgSrc1: require("../../assets/img/search/shang.png"), 
					imgSrc2: require("../../assets/img/search/bto.png"), 
					tabType: 0 ,// 菜单类型
					tab0: {mescroll: null, list: [], isListInit: false}, // 全部
					loadmore:false,
          b:false,
          searchBarFixed:false,
          img:this.$store.state.img,
          model:'',
          cid:'',
          child:'',
          arr:[],
          quanbu:false,
          quanbu2:false,
					page:1,
          input:'',
          pracite:'全部专业',
          pracite2:'综合',
					allLoaded:false,
          one:[
            {
              title:'全部专业',
              id:''
            }
          ],
          thr:[
            {
              title:'综合',
              id:''
            },
						{
						  title:'最新',
						  id:'new'
						},
						{
						  title:'最热',
						  id:'hot'
						},
						{
						  title:'免费',
						  id:'free'
						}
          ]
        }
      },
      methods:{
          banji(item){
            this.$router.push({
              path:'/class',
              query:{
                bid:item.id
              }
            })
          },
        btn(){
          this.quanbu = !this.quanbu;
          this.quanbu2 = false;
        },
        btn2(){
          this.quanbu2 = !this.quanbu2;
          this.quanbu = false;
        },
        xi(item){
        //改变联动id，获取列表
          this.model = item.id;
          this.quanbu = false;
					this.pracite=item.title;
          // this.class(0);
					this.changeTab();
        },
        
        xi2(item){
          //改变联动id，获取列表
          this.child = item.id;
					this.quanbu2 = false;
					// pracite:'全部课程';
					this.pracite2=item.title;
          this.changeTab();
        },
				getTabData (tabType) {
				  if (tabType == null) tabType = this.tabType;
				  if (tabType === 0) {
				    return this.tab0;
				  }
				},
				changeTab () {
					this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
					this.getTabData(0).mescroll.resetUpScroll() // 刷新列表数据
				},
				mescrollInit0 (mescroll) {
				  mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
				  this.tab0.mescroll = mescroll;
				},
				
				getMescrollUp (tabType) {
				  let emptyWarpId = 'dataList' + tabType;
				  return {
				    auto: true,
				    callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
				    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
						   empty: {
						     warpId: emptyWarpId, // 父布局的id;
						     icon: this.imgSrc, // 图标,默认null
						     tip: '暂时没有找到您所需要的内容…', // 提示
						     
						   },
				  }
				},
				upCallback (page, mescroll) {
					var that = this;
				  if (mescroll.tabType === 0) {
				    // 全部
				    that.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
						that.axios.get(that.$store.state.url +'Classroom/classlist',{
							 params:{
								model:that.model,
								field:that.child,
								page: page.num,
								limit:page.size
							 }
						 }).then(res=>{
											// console.log(res.data.data.class)
							that.loadmore = true;
							if(res.data.errcode==0||res.data.errcode=='0'){
									var curPageData = res.data.data.lists;
									mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
									 if (page.num === 1) that.tab0.list = []; // 如果是第一页需手动制空列表
									 that.tab0.list = that.tab0.list.concat(curPageData); // 追加新数据
									 // this.tab0.list=res.data.data.order
							}
						
						})
				  }
				}
      },
      mounted(){
				
				this.sdk.getJSSDK('','',this.$store.state.url);
				
      //  一级分类
        this.axios.get(this.$store.state.url + "Classroom/category").then(res=>{
          // console.log(res.data)
					this.loadmore=true;
          if (res.data.errcode == 0){
            this.one = res.data.data
            var obj = {
              title:'全部专业',
              id:''
            }
            this.one.unshift(obj);
          }
        })


        //滚动到固定位置停下
        // window.addEventListener('scroll', this.handleScroll)


      }
    }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: 0.8rem;
	  bottom: 0;
	  height: auto;
	}
  .rel{
    position: relative;
    background: #fff;
    margin-top: 0.1rem;
	  z-index: 9999999;
  }
  .fix{
    position: fixed;
    top: 0;
    background: #fff;
    width: 7.5rem;
		z-index: 999999;
  }
  .shang{
    width: 30%;
    height: 0.5rem;
   display: flex;
    align-items: center;
  }
  .shang:nth-child(2){
    justify-content: center;
  }
  .shang:nth-child(3){
    display: flex;
    justify-content: flex-end;
  }
  .blue{
    font-size:0.26rem;
    color:rgba(2,135,255,1);
  }
  .gray{
    font-size:0.26rem;
    color:rgba(51,51,51,1);
  }
  .shang img{
    width: 0.15rem;
    height: 0.13rem;
    margin-left: 0.14rem;
  }
  .xia{
    width: 92%;
    margin: auto;
    box-sizing: border-box;
    /*margin-top: 0.2rem;*/
    padding-top: 0.2rem;
  }
  .spanspan{
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    vertical-align: middle;
  }
  .spanspan1{
    font-size:0.28rem;
    color:rgba(2,135,255,1);
    vertical-align: middle;
  }
  /*.xia:hover .spanspan{*/
  /*color:rgba(2,135,255,1);*/
  /*}*/
  .xia img{
    width: 0.32rem;
    vertical-align: middle;
    float: right;
  }
  .xia p{
    width: 100%;
    height: 0.02rem;
    background:rgba(237,237,237,1);
    margin-top: 0.2rem;
  }
  .pos{
    width:7.5rem;

    position: absolute;
    top: 0.7rem;
    left: 0;
  }
  /*.one{*/
  /*display: inline-block;*/
  /*}*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.25s ease-out;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  .mar{
    margin-top: 0.8rem;
  }
  .hotclass{
    width: 6.9rem;
    margin:.3rem auto;
		/* border-bottom: 0.02rem solid #ededed; */
  }
	.hotclass:last-child{
		border-bottom: none;
	}
	.classpic{
		width: 6.9rem;
		height: 3.9rem;
		margin: auto;
		border-radius:.1rem .1rem 0rem 0rem;
		overflow: hidden;
	}
	.classpic img{
		width: 100%;
		height: 100%;
	}
  /* .hotclass:nth-child(3){
    margin-top: 0.3rem;
  } */

  .miaoshu{
    width:100%;
    /* height:0.61rem; */
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.2rem;
    white-space:normal;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
  }
  .ce{
    margin-top: 0.25rem;
  }
  .ce:after{
    content:'';
    display: block;
    clear: both;
  }
  .leftImg{
    /*width: 100%;*/
    float: left;
  }
  .leftImg div{
    display: inline-block;
    min-width: 0.8rem;
    text-align: center;
    font-size: 0.24rem;
  }
  .leftImg div img{
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
  }
  .leftImg p{
    margin-top: 0.05rem;
  }
  .rightZ{
    float: right;
    text-align: right;
  }
  .rightZ .pricetype,.rightZ .pricedetail{
    display: inline-block;
  }
  .rightZ .pricetype{
    font-size:0.3rem;
    font-weight:800;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
    /*margin-top: 0.1rem;*/
  }
  .rightZ .pricedetail{
    padding: 0 0.1rem 0 0.1rem;
    border:0.02rem solid rgba(255,2,20,1);
    border-radius:0.16rem;
    font-size: 0.24rem;
    color: #FF0214;
    margin-right: 0.02rem;
    margin-top: 0.07rem;
  }
  .rightZ .pricedetail1{
    width: 100%;
    overflow: hidden;
    margin-top: 0.15rem;
    font-size:0.24rem;
    color:rgba(255,2,20,1);
    line-height:0.32rem;
  }
  .buttons{
    width: 1.6rem;
    height:0.6rem;
    background:rgba(2,135,255,1);
    border-radius:0.3rem;
    color: #fff;
    font-size: 0.28rem;
    outline: none;
    border: none;
    margin-top: 0.15rem;
  }
	.buttonparic{
		background: #fff !important;
		color: rgba(2,135,255,1) !important;
		font-weight: 600;
		font-size:.3rem;
	}
  .buttons1{
    width: 1.6rem;
    height:0.6rem;
    background:rgba(194,201,211,1);
    border-radius:0.3rem;
    color: #fff;
    font-size: 0.28rem;
    outline: none;
    border: none;
    margin-top: 0.15rem;
  }

  .btoS{
    width: 100%;
    margin-top: 0.2rem;
  }
  .btoS p:nth-child(1){
    float: left;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
  }
  .btoS p:nth-child(2){
    float: right;
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
  }
  .btoS:after{
    content: '';
    display: block;
    clear: both;
  }
</style>
